﻿@each $dimension in $dimensions {
    .is-#{$dimension}x#{$dimension} {
        height: $dimension * 1px;
        width: $dimension * 1px;
    }
}

@mixin make-sizes( $breakpoints: $grid-breakpoints) {
    @each $breakpoint in map-keys($breakpoints) {
        $infix: breakpoint-infix($breakpoint, $breakpoints);

        @include media-breakpoint-up($breakpoint, $breakpoints) {
            @each $prop, $abbrev in (width: width, height: height) {
                @each $size, $length in $sizes {
                    .is-#{$abbrev}#{$infix}-#{$size} {
                        #{$prop}: $length !important;
                    }
                }
            }

            .is-max-width#{$infix}-100 {
                max-width: 100% !important;
            }

            .is-max-height#{$infix}-100 {
                max-height: 100% !important;
            }

            .is-min-viewport-width#{$infix}-100 {
                min-width: 100vw !important;
            }

            .is-min-viewport-height#{$infix}-100 {
                min-height: 100vh !important;
            }

            .is-viewport-width#{$infix}-100 {
                width: 100vw !important;
            }

            .is-viewport-height#{$infix}-100 {
                height: 100vh !important;
            }
        }
    }
}

@include make-sizes();
